<template>
    <v-app>
        <my-loading-overlay :loading-overlay="loadingOverlay"></my-loading-overlay>
        <my-app-bar></my-app-bar>
        <v-main>
            <v-container fluid>
                <v-row>
                    <v-col v-for="item of userList" :key="item.id" cols="3">
                        <div id="user-box" class="pa-3 elevation-5 rounded-lg">
                            <div>
                                用户名：{{item.username}}
                            </div>
                            <div>
                                邮箱：{{item.email}}
                            </div>
                            <div>
                                注册时间：{{item.createTime}}
                            </div>
                            <div>
                                容量：{{item.capacity}}GB
                                <span class="ml-2">
                                    <v-btn icon color="orange lighten-1" @click="add(item)">
                                        <v-icon>mdi-plus-box-outline</v-icon>
                                    </v-btn>
                                </span>
                                <span>
                                    <v-btn icon color="orange lighten-1" @click="minus(item)">
                                        <v-icon>mdi-minus-box-outline</v-icon>
                                    </v-btn>
                                </span>
                                <span>
                                    <v-btn @click="submit(item.id, item.capacity)" color="orange lighten-1" icon>
                                        <v-icon>mdi-check-box-outline</v-icon>
                                    </v-btn>
                                </span>
                            </div>
                            <div>
                                状态：
                                <v-btn v-if="item.locked === 0" @click="updateLocked(item.id, 1)" small outlined color="success">
                                    启用
                                </v-btn>
                                <v-btn v-else @click="updateLocked(item.id, 0)" small outlined color="error">
                                    禁用
                                </v-btn>
                            </div>
                            <div class="mt-2">
                                <v-btn block outlined color="primary" @click="openEmailDialog(item.email)">发邮件</v-btn>
                            </div>
                        </div>
                    </v-col>
                </v-row>
            </v-container>
            <v-dialog
                    v-model="emailDialog"
                    persistent
                    overlay-opacity="0.2"
                    width="500px"
            >
                <v-container style="background-color: white">
                    <v-row>
                        <v-col>
                            <v-textarea
                                    v-model="msg"
                                    ref="emailMsg"
                                    outlined
                                    label="邮件内容"
                                    counter
                                    clearable
                                    auto-grow
                                    :rules="[emailMsgRule]"
                                    @click="sendEmail()"
                            ></v-textarea>
                        </v-col>
                    </v-row>
                    <v-row>
                        <v-col cols="6">
                            <v-btn color="primary" block @click="sendEmail()">发送</v-btn>
                        </v-col>
                        <v-col cols="6">
                            <v-btn color="warning" block @click="closeEmailDialog()">取消</v-btn>
                        </v-col>
                    </v-row>
                </v-container>
            </v-dialog>
        </v-main>
    </v-app>
</template>

<script>
    import {emailMsgRule} from "../util/rule";
    import MyAppBar from "../components/disk/layout/MyAppBar";
    import MyLoadingOverlay from "../components/disk/common/MyLoadingOverlay";
    export default {
        name: "Admin",
        components: {MyLoadingOverlay, MyAppBar},
        mounted() {
            this.getUserList();
        },
        data() {
            return {
                emailMsgRule,
                loadingOverlay: false,
                emailDialog: false,
                email: '',
                msg: '',
                userList: []
            }
        },
        methods: {
            add(item) {
                if (item.capacity === 10) {
                    this.$error({message: '容量不能大于10GB'});
                    return;
                }
                item.capacity += 1;
            },
            minus(item) {
                if (item.capacity === 1) {
                    this.$error({message: '容量不能小于1GB'});
                    return;
                }
                item.capacity -= 1;
            },
            submit(id, capacity) {
                let _this = this;
                _this.loadingOverlay = true;
                _this._put({
                    url: 'admin/update-capacity',
                    data: {
                        id,
                        capacity
                    }
                }).then(rsp => {
                    _this.$success({message: rsp.data.msg})
                    _this.getUserList();
                }).catch(error => {
                    console.log(error)
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            },
            updateLocked(id, locked) {
                let _this = this;
                _this.loadingOverlay = true;
                _this._put({
                    url: 'admin/update-locked',
                    data: {
                        id,
                        locked
                    }
                }).then(rsp => {
                    _this.$success({message: rsp.data.msg})
                    _this.getUserList();
                }).catch(error => {
                    console.log(error)
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            },
            getUserList() {
                let _this = this;
                _this.loadingOverlay = true;
                _this._get({
                    url: 'admin/user-list'
                }).then(rsp => {
                    _this.userList = rsp.data;
                }).catch(error => {
                    console.log(error);
                    _this.$serverError();
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            },
            openEmailDialog(email) {
                this.emailDialog = true;
                this.email = email;
            },
            closeEmailDialog() {
                this.$refs['emailMsg'].reset();
                this.emailDialog = false;
                this.email = '';
            },
            sendEmail() {
                let _this = this;
                if (!_this.$refs['emailMsg'].validate()) {
                    return;
                }
                _this.loadingOverlay = true
                _this._post({
                    url: 'admin/send-email',
                    data: {
                        email: _this.email,
                        msg: _this.msg
                    }
                }).then(rsp => {
                    if (rsp.data.code === '00000') {
                        _this.$success({message: '发送成功'})
                        _this.closeEmailDialog()
                    } else {
                        _this.error({message: rsp.data.msg})
                    }
                }).catch(error => {
                    console.log(error)
                    _this.$serverError()
                }).finally(() => {
                    _this.loadingOverlay = false;
                })
            }
        }
    }
</script>

<style scoped>
 #user-box div {
     height: 40px;
     line-height: 40px;
 }
</style>